<template>
  <div>
    <!-- 预览 -->
    <el-dialog
      title="题目预览"
      :visible="choiceShowDialog"
      @close="closeDialogFn"
      width="55%">
      <el-row :gutter="20">
        <el-col :span="6">【题型】：{{ questionTypeEmpment }}</el-col>
        <el-col :span="6">【编号】：{{ choiceData.id }}</el-col>
        <el-col :span="6">【难度】：{{ difficultyEmpment }}</el-col>
        <el-col :span="6">【标签】：{{ choiceData.tags }}</el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">【学科】：{{ choiceData.subject }}</el-col>
        <el-col :span="6">【目录】：{{ choiceData.catalog }}</el-col>
        <el-col :span="6">【方向】：{{ choiceData.direction }}</el-col>
      </el-row>
      <hr>
      <el-row :gutter="20">
        <el-col :span="4">
          【题干】：
        </el-col>
      </el-row>
      <el-row>
        <div v-html="choiceData.question"></div>
      </el-row>
      <el-row style=" marginBottom: 20px">{{ questionTypeEmpment }}:</el-row>
      <el-row>
        <!-- 单选 -->
        <div v-if="choiceData.questionType==='1'">
          <el-radio-group>
            <el-row v-for="item in optionsData"
              :key="item.id" style="margin-bottom: 20px">
              <el-radio  :label="item.isRight">{{item.title}}</el-radio>
            </el-row>
          </el-radio-group>
        </div>
        <!-- 多选 -->
        <div  v-if="choiceData.questionType==='2'">
          <el-row
            style="margin-bottom: 20px"
            v-for="item in optionsData"
            :key="item.id">
            <el-checkbox :value="item.isRight===1? true:false">{{item.title}}</el-checkbox>
          </el-row>
        </div>
      </el-row>
      <hr>
      <el-row :gutter="20">
        <el-col :span="4">
          【参考答案】：
        </el-col>
        <el-col :span="20">
          <el-button type="danger" @click="show">视频答案预览</el-button>
        </el-col>
      </el-row>
      <video controls src="https://mo-1314261685.cos.ap-beijing.myqcloud.com/TUOER.mp4" v-if="videoShow"></video>
      <hr>
      <el-row :gutter="20">
        <el-col :span="4">
          【答案解析】：
        </el-col>
        <el-col :span="20" v-html="choiceData.answer">
        </el-col>
      </el-row>
      <hr>
      <el-row :gutter="20">
        <el-col :span="4">
          【参考答案】：
        </el-col>
        <el-col :span="20">
          {{ choiceData.remarks }}
        </el-col>
      </el-row>
      <div slot="footer"  class="dialog-footer">
        <el-button type="primary" @click="closeDialogFn">关闭</el-button>
      </div>
    </el-dialog>
    <!-- 审核 -->
    <el-dialog
      title="题目审核"
      :visible="auditShowDialog"
      @close="auditDialogFn"
      width="25%">
      <el-form ref="auditForm" :model="auditForm">
        <el-form-item>
          <el-radio-group v-model="auditForm.chkState">
            <el-radio :label='1'>通过</el-radio>
            <el-radio :label='2'>拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-input type="textarea" v-model="auditForm.chkRemarks" placeholder="请输入审核意见"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="auditDialogFn">取 消</el-button>
        <el-button type="primary" @click="auditCheck">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 数据格式化处理文件
import { questionTypes, difficulty } from '@/api/hmmm/constants'
// 审核提交
import { choiceCheck } from '@/api/hmmm/questions'
export default {
  props: {
    choiceShowDialog: {
      type: Boolean,
      default: false
    },
    choiceData: {
      default: false
    },
    auditShowDialog: {
      type: Boolean,
      default: false
    },
    id: {
      type: Number
    },
    optionsData: {
      default: false
    }
  },
  data () {
    return {
      // subject: choiceData.subject
      // 视频显示与隐藏
      videoShow: false,
      // 审核表单
      auditForm: {
        // 点选默认选中某一个
        chkState: 1,
        chkRemarks: '',
        id: null
      }
    }
  },
  computed: {
    // 题型数据格式处理
    questionTypeEmpment () {
      const question = questionTypes
      console.log(questionTypes)
      const result = question.find(item => item.value === this.choiceData.questionType)
      return result ? result.label : '未知'
    },
    // 困难度格式化处理
    difficultyEmpment () {
      const diff = difficulty
      const result = diff.find(item => item.value === this.choiceData.difficulty)
      return result ? result.label : '未知'
    }
  },
  methods: {
    // 返回关闭弹窗
    closeDialogFn () {
      this.$emit('update:choiceShowDialog', false)
      this.videoShow = false
      // console.log(this.optionsData)
    },
    // 题目审批取消按钮
    auditDialogFn () {
      this.$emit('update:auditShowDialog', false)
      this.auditForm = {
        chkState: 1,
        chkRemarks: '',
        id: null
      }
    },
    // 控制视频显示与隐藏
    show () {
      this.videoShow = !this.videoShow
    },
    // 审核确定
    async auditCheck () {
      this.auditForm.id = this.id
      console.log(this.auditForm)
      if (this.auditForm.chkRemarks === '') {
        // console.log(this.auditForm.chkRemarks)
        this.$message.warning({ message: '请输入审核意见' })
        return
      }
      const data = await choiceCheck(this.auditForm)
      console.log(data)
      this.$message.success({ message: '操作成功' })
      this.auditDialogFn()
      this.$emit('getChoiceList')
    }
  }
}
</script>

<style scoped lang="scss">
.el-dialog {
  transform: none;
  left: 0;
  position: relative;
  margin: 0 auto;
  video {
    width: 400px;
    height: 300px;
  }
}

</style>
